<template>
  <div>
    <div class="node" v-has="{action: 'old:balance:list', effect: 'move'}">
      <div :class="[$style.search_box, $style.topSelect]">
        <SearchInput
        placeholder="手机号"
        label="手机号"
        style="margin-right:20px"
        :value="phone"
        :onChange="(val) => changeSearch('phone',val)"
        :onBlur="queryData"
      />
        <SearchInput
          placeholder="卡编号"
          label="卡编号"
          style="margin-right:20px;"
          :value="code"
          :onChange="(val) => changeSearch('code',val)"
          :onBlur="queryData"
        /> 
        <div :class="$style.selectBox">
        <label>状态：</label>
        <el-select
          style="width:160px"
          v-model="state"
          clearable
          @change="stateSearch"
          placeholder="请选择"
        >
          <el-option label="已转移" :value="1"></el-option>
          <el-option label="未转移" :value="0"></el-option>
        </el-select>
      </div>
      <div :class="$style.selectBox" style="display: flex;align-items: center;">
        <label>时间：</label>
        <el-date-picker
          v-model="appointmentTime"
          type="datetimerange"
          @change="queryData"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions"
          style="height:40px"
        ></el-date-picker>
      </div>
      <div :class="$style.searchBox1" style="margin-left: 20px">
        <el-button type="primary" icon="el-icon-search" @click="queryData">查询</el-button>        
      </div>
      </div>
      <Panel title="老平台余额管理" useBack :intro="intro">
        <TableEncapsulation
          slot="body"
          :changeSelectRow="(ids) => multipleSelection = ids"
          :tableConfig="tableConfig"
          :tableData="tableData"
        >
          <template slot="operation" slot-scope="operation">
            <el-button v-has="{action: 'old:balance:transfer', effect: 'move'}" v-if="operation.row.state==0 "  type="text" @click="()=>moveBalance(operation.row)">转移</el-button>
          </template>
          <TablePager
            slot="pager"
            v-if="pager.use"
            :size="pager.size"
            :pageChange="pageChange"
            :show-total="pager.showTotal"
            :total="pager.total"
            :current="pager.current"
          >
            <span class="demonstration">GO></span>
          </TablePager>
        </TableEncapsulation>
      </Panel>
      <ModalPanel
      :visible='visible'
        title="转移余额"
        :onCancel="onCancel"
        :class="$style.bannerDialog"
        :onOk="onSubmit">
        <ModifyForm
          :hiddenBtn='true'
          :editColumn='editColumn'
          :updateData="updateData"
          labelWidth='100px'
          ref="configModal"
          :class="$style.ModifyForm"
          :temporaryData='modalData'>
          <div slot="userSelect">
              <SearchSelect
                  placeholder="输入名字或手机号"
                  
                  style="margin-right:20px;"
                  :value="uid"
                  :loading="loading"
                  :options="selectValue"
                  :onChange="(val) => searchSelect('uid',val)"
                  :onSearch="onSearch"
              />
          </div>
        </ModifyForm>
      </ModalPanel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'old:balance:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>

<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import SearchInput from "@/components/SearchInput";
import TablePager from "@/components/Pager";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
import { objectFilter } from "@/tools/array";
import { dateFormat } from "@/tools/time";
import SearchSelect from "@/components/SearchSelect";

export default {
  name:'oldBalance',
  components: {
    Panel,
    TableEncapsulation,
    SearchInput,
    TablePager,
    ModalPanel,
    ModifyForm,
    SearchSelect
  },
  data() {
    return {
       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      appointmentTime: null,
      intro:{
        title: '账号余额转移-介绍说明',
        content:`<ul><li>将旧小程序用户充值的余额转移到新平台小程序使用</li></ul>`
      },
      keywords: '',
      editColumn: [
        // {
        //   name: "手机号",
        //   prop: "phone ",
        //   type: "text",
        //   width: 24,
        //   required: true
        // },
        {
          name: "转移金额",
          prop: "transfer",
          type: "number",
          width: 24,
          required: true
        },
        {
          name: "转移账户",
          prop: "transferUid",
          type: "other",
          slotName: "userSelect",
          width: 24,
        },
        {
          name: "处理备注",
          prop: "mark",
          type: "text",
          width: 24,
          required: true
        }
      ],

      operation: true,
      account: "",
      accountStatus: "",
      multipleSelection: [],
      nickName: "",
      pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      visible:false,
      modalData: {},
      tableData: [],
      page:1,
      uid: '',
      state: '',
      code: '',
      phone: '',
      loading: false,
      selectValue: [],
    };
  },
  computed: {
    tableConfig() {
      return {
        selection: false,
        columnConfig: [
          {
            label: "卡号",
            type: "text",
            prop: "code",
            align: "center"
          },
          {
            label: "手机号",
            type: "text",
            prop: "phone",
            align: "center"
          },
          {
            label: "转移用户名称",
            type: "text",
            prop: "transferName",
            align: "center"
          },
           {
            type: "text",
            prop: "balance",
            label: "余额",
            align: "center",
          },
          {
            label: "转移金额",
            type: "text",
            prop: "transfer",
            align: "center",
        
          },
          {
            label: "转移用户ID",
            type: "text",
            prop: "transferUid",
            align: "center",
        
          },
          {
            label: "转移时间",
            type: "text",
            prop: "transferTime",
            align: "center",
        
          },
          {
            label: "是否可转移",
            type: "other",
            prop: "canTransfer",
            align: "center",
            fnc: val => val ? "可转移" :  "不可转移",
          },
          {
            label: "状态",
            type: "other",
            prop: "state",
            align: "center",
            fnc: val => val ==1? "已处理" :  "未处理",
            class: val => val ? "agree" :  "wait",
          },
          {
            label: "操作人",
            type: "text",
            prop: "operator",
            align: "center",
        
          },
          {
            label: "处理信息备注",
            type: "text",
            prop: "mark",
            align: "center",
        
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作"
          }
        ].filter(Boolean)
      };
    }
  },
  methods: {
    moveBalance(rowData){
      rowData.transfer = rowData.balance
        // v-if="operation.row.canTransfer && operation.row.state==0 "
      this.modalData = {...rowData}
      this.visible = true
    },
     onCancel () {
      this.visible = false
    },
     onSubmit() {
      this.$refs['configModal'].onSubmit()
    },
    searchSelect(key, val){
      this[key] = val;
    },
    async updateData(values){
        let transferUid = this.uid
        let url, msg
        if(!transferUid){
          this.$message.error("请选择转移账户");
          return
        }
        const {phone, transfer, mark} = values
        url = '/old/balance/transfer'
        msg = '转移成功'
        let res = await request({
        url: url,
        method: 'POST',
        data:  {phone, transfer, mark, transferUid}
        })
        if (res.code !==0) return
        this.$message.success(msg)
        this.visible = false
        this.queryData()
    },
    //用户
    async onSearch(query){
      if (query !== '') {
          this.loading = true;
          let { list } = await request({
              url: "/wx/user/select",
              method: "POST",
              data:  {
                key: query
              }
            });
            this.loading =  false
            this.selectValue = list.map(item => {
              item.value = item.id+''
              item.label = item.name
              return item
            })
        } else {
          this.selectValue = [];
        }
    },
     changeSearch(key, val) {
      this[key] = val;
      this.pager.current = 1;
    },
    stateSearch(){
      this.pager.current = 1;
      this.queryData()
    },
    balance(rowData) {
      this.$router.push({
        path: "/user/balance",
        query: {
          userId: rowData.id
        }
      })
    },
    changeKeuWord(val){
      this.keywords = val
      this.pager.current=1
    },
    pageChange(val) {
      this.pager.current = val
      this.queryData()
    },

    async queryData(){
      let endTime = this.appointmentTime ? (dateFormat(this.appointmentTime[1] + 86400000-1, "yyyy-MM-dd HH:mm:ss")) : undefined
      let beginTime = this.appointmentTime ? (dateFormat(this.appointmentTime[0],"yyyy-MM-dd HH:mm:ss")) : undefined
      let state =  this.state
      let phone = this.phone
      let code = this.code
      let page = this.pager.current
      let search = objectFilter({beginTime, endTime, state, phone, page, code})
      let res = await request({
        url: "/old/balance/list",
        method: "POST",
        data: search
      });
      this.tableData = res.page.list
      this.tableData = res.page.list
      this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
      // this.$set(this.pager,'total',res.total>>>0)
    },
  }, 
  created() {
    // this.uid = this.$route.query.userId
    this.queryData()
  }
};
</script>

<style lang='scss' module>
.modifyStyle{

}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  // flex-direction: row-reverse;
  
  :global{
    .el-input{
      width: 250px;
    }
    .el-select{
      .el-input{
        width: 90px;
      }
    }
    .el-input__icon{
      line-height: 32px;
    }
  }
}

.topSelect{
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.selectBox {
  :global {
    label {
      font-size: 14px;
      color: #666666;
    }
    .el-input__inner {
      height: 32px;
    }
    .el-input__suffix {
      line-height: 32px;
    }
    .el-date-editor--datetime{
      width: 200px;
    }
  }
}
</style>